<!doctype html>
<html lang="`en`">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web-Tools</title>
</head>
<body>

<div class="box-wrap">
    <div class="box">
        <div id="p1" class="panel" onclick="pushView()">
            <div class="big-title">
                <span>iOS Localizable Parser</span>
            </div>
        </div>
    </div>

    <div class="box">
        <div id="p2" class="panel" onclick="pushView()">
            <div class="big-title">
                <span>Android Localizable Parser</span>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    function pushView() {
        window.location.href="ios-localizable-parser.html";
    }
</script>

<style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Jhenghei", sans-serif;
    }

    .panel {
        width: 90%;
        max-width: 700px;
        border-radius: 12px;
        /*padding-top: 30px;*/
        /*padding-right: 50px;*/
        /*padding-bottom: 30px;*/
        /*padding-left: 50px;*/
        /*margin-top: 50px;*/
        /*margin-right: auto;*/
        /*margin-left: auto;*/
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
        border-top-color: rgb(204, 204, 204);
        border-right-color: rgb(204, 204, 204);
        border-bottom-color: rgb(204, 204, 204);
        border-left-color: rgb(204, 204, 204);
        border-image-source: initial;
        border-image-slice: initial;
        border-image-repeat: initial;
        margin-bottom: 40px;
        color: rgb(51, 51, 51);
        font-weight: 100;
    }

    .big-title {
        text-align: center;
        font-size: 2rem;
        margin: 26px 0;
        color: rgb(24, 144, 255);
    }

    .box-wrap {
        text-align: center;
        /*background-color: #d4d4f5;*/
        overflow: hidden;
    }

    .box-wrap>div {
        /*width: 31%;*/
        /*padding-bottom: 31%;*/
        margin: 1%;
        /*border-radius: 10%;*/
        float: left;
        /*background-color: orange;*/
    }

    .wechat-group img {
        max-width: 220px;
        height: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        width: 100%;
    }

    .welcome-img img {
        width: 100%;
        max-width: 280px;
    }

    @media (max-width: 767.98px) {
        .big-title {
            font-size: 1.9rem;
        }
    }

</style>
</html>
